<template>
  <!-- 把tableData，表格数据传入table组件， -->
  <k-table :model="tableData" :prop="label">
    <!-- 
        sortable：是否排序，点击标题内的button触发
        table-cluomn：KtableColumn组件传来的生成的列的顺序
        prop：每个格子的属性名
        label：每个格子的中文标题
       -->
    <k-table-column
      :sortable="true"
      @table-cluomn="cluomn($event)"
      :prop="'big'"
      :label="'大小'"
    ></k-table-column>
    <k-table-column
      :sortable="true"
      @table-cluomn="cluomn($event)"
      :prop="'address'"
      :label="'地址'"
    ></k-table-column>
    <k-table-column
      :sortable="true"
      @table-cluomn="cluomn($event)"
      :prop="'name'"
      :label="'姓名'"
    ></k-table-column>
    <k-table-column
      :sortable="true"
      @table-cluomn="cluomn($event)"
      :prop="'date'"
      :label="'日期'"
    ></k-table-column>
  </k-table>
</template>

<script>
// 导入组件
import KTable from "./Ktable.vue";
// import KTableColumn from "./KtableColumn.vue";
import KTableColumn from "@/components/Ktable/KtableColumn.vue";
// import KTableColumn from "comps/Ktable/KtableColumn.vue";
export default {
  components: { KTable, KTableColumn },
  data() {
    return {
      // 动态获取表格 标题的顺序 big，address，name，date
      label: [],
      // 表格数据
      tableData: [
        {
          big: 10,
          date: "2016-05-02",
          name: "1王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          big: 0,
          date: "2016-05-04",
          name: "2王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          big: 1,
          date: "2016-05-01",
          name: "4王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          big: 3,
          date: "2016-05-03",
          name: "3王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    // 通过KtableColumn组件的this.$emit() 把每一个列的标题传过来，不然生成列的顺序会是data 里面tableData的顺序
    cluomn(e) {
      // 每次生成一个列的标题就push一个标题到label
      this.label.push(e);
    },
  },
};
</script>

<style>
</style>